---
title: <ActionBar>
---

import { PuckPreview } from "@/docs/components/Preview";
import { ActionBar } from "@/puck";

# \<ActionBar\>

Render the Puck ActionBar. Use this when overriding the [actionBar](/docs/api-reference/overrides/action-bar).

```tsx showLineNumbers copy
<ActionBar label="Actions">
  <ActionBar.Group>
    <ActionBar.Action onClick={() => console.log("Clicked!")}>
      ★
    </ActionBar.Action>
  </ActionBar.Group>
</ActionBar>
```

<PuckPreview>
  <div style={{ display: "flex" }}>
    <ActionBar label="Actions">
      <ActionBar.Group>
        <ActionBar.Action>★</ActionBar.Action>
      </ActionBar.Group>
    </ActionBar>
  </div>
</PuckPreview>

## Props

| Prop                    | Example   | Type      | Status   |
| ----------------------- | --------- | --------- | -------- |
| [`children`](#children) | `<div />` | ReactNode | Required |
| [`label`](#label)       | `"Label"` | String    | Required |

## Required Props

### `children`

The children for the ActionBar. Normally a fragment of [`<ActionBar.Action>` components](/docs/api-reference/components/action-bar-action).

If this is a fragment, it will be rendered in a flex row.

### `label`

The label for the ActionBar.
